/**index.wxss**/
.fixed(@t: auto, @b: auto, @l: auto, @r: auto) {
    position: fixed;
    top: @t;
    bottom: @b;
    left: @l;
    right: @r;
}
.absolute(@t: auto, @b: auto, @l: auto, @r: auto) {
    position: absolute;
    top: @t;
    bottom: @b;
    left: @l;
    right: @r;
}
.wh (@w, @h) {
    width: @w;
    height: @h;
}
.ellipsis{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
@v:7.5vw;
.opacity-bg{
    .wh(100%,100%);
    .fixed(@t:0,@r:0);
    z-index: 1;
}
page{
    margin: 0;
    padding: 0;
}
.main-bg{
    .wh(100%,100%);
    position: fixed;
    z-index: -1;
}

// 头部信息
.start-page{
    .wh(100%,100%);
    .absolute(@t:0);
    z-index: 9999;
    .btn{
        .wh(388rpx,114rpx);
        .absolute(@t:88%,@l:0,@r:0);
        margin: 0 auto;
    }
}
.user-info{
    width: 716rpx;
    height: 228rpx;
    .fixed(@t:43rpx,@l:0,@r:0);
    margin: 0 auto;
    .user-head-img{
        .wh(120rpx,120rpx);
        border-radius: 50%;
        .fixed(@t:54rpx,@l:30rpx);
    }
    .user-nickname{
        .fixed(@t:100rpx,@l:180rpx);
        color: rgba(255,255,255,.8);
        font-size: 28rpx;
        max-width: 220rpx;
        .ellipsis;
    }
    .user-score{
        .fixed(@t:100rpx,@l:420rpx);
        color:rgba(255,255,255,.8);
        font-size: 28rpx;
        text{
            color: #f7ab3f;
            .fixed(@t:96rpx,@l:490rpx);
            max-width: 140rpx;
            font-weight: 600;
            font-size: 34rpx;
            .ellipsis;
        }
    }
    .goldcoin,.bao{
        color: rgba(255,255,255,.8);
        font-size: 22rpx;
        max-width: 170rpx;
        .ellipsis;
    }
    .bao{
        max-width: 200rpx;
    }
    .store-btn{
        .wh(231rpx,131rpx);
        .fixed(@t:160rpx,@l:450rpx);
    }
    .goldcoin{
        .fixed(@t:208rpx,@l:190rpx);
        font-size: 25rpx;
    }
    .goldcoin + image, .bao + image{
        .wh(131rpx,131rpx);
    }
    .goldcoin + image{
        .fixed(@t:158rpx,@l:330rpx);
    }
    .bao + image{
        .fixed(@t:158rpx,@l:570rpx);
    }
    .bao{
        .fixed(@t:208rpx,@l:430rpx);
    }
}
.rule-btn{
    color: #1d7aa0;
    font-size: 20rpx;
    .fixed(@t:300rpx,@r:65rpx);
}
// 没车时的购车按钮
.buy-car-btn{
    .wh(535rpx,535rpx);
    .fixed(@t:0,@b:0,@l:0,@r:0);
    margin: auto;
}
.buy-car-btn + image{
    .wh(197rpx,197rpx);
    .fixed(@t:0,@b:0,@r:0,@l:0);
    margin: auto;
}
.buy-car-text{
    .wh(280rpx,28rpx);
    .fixed(@t:60%,@l:0,@r:0);
    font-size: 28rpx;
    color:rgba(255,255,255,.6);
    margin: 0 auto;
}

//有车时
.battle-btn{
    .wh(346rpx,118rpx);
    .fixed(@t:24%,@l:30rpx);
}
.car-block{
    //改装车模块
    .wh(554rpx,329rpx);
    .fixed(@t:39%,@l:0,@r:0);
    margin: 0 auto;
    .car-paiqi,.car-luntai,.car-penqi-body,.car-taban,.car-lahua,.car-xingli,.car-baoxian,.car-body{
        .wh(100%,100%);
        .absolute(@t:0);
    }

}
.bottom-decoration{
    .wh(750rpx,32rpx);
    .fixed(@b:16%);
}
.bottom-depot,.bottom-honor,.bottom-school,.bottom-duty{
    .wh(67rpx,92rpx);
    .fixed(@b:7%,@l:8%);
}
.bottom-honor{
    left:22%;
}
.bottom-duty{
    .fixed(@b:7%,@r:8%);
}
.bottom-school{
    .fixed(@b:7%,@r:22%);
}
.level-name{
    .fixed(@t:65%,@l:60rpx);
    display: flex;
    text{
        display: inline-block;
        font-size: 25rpx;
        height:52rpx;
        line-height: 60rpx; 
    }
    text:nth-child(2){
        color: rgba(255,255,255,.8);
        text-indent: 10rpx;
    }
    text:nth-child(3){
        color: #fff;
    }
    text:nth-child(4){
        color: #0ac5ed;
        text-indent: 20rpx;
    }
    .name-logo{
        .wh(37rpx,52rpx);
    }
}
.level-score{
    .fixed(@t:66%,@r:70rpx);
    display: flex;
    .score-icon{
        .wh(38rpx,27rpx);
    }
    text:nth-child(2){
        font-size: 25rpx;
        color: rgba(255,255,255,.8);
        height: 27rpx;
        line-height: 27rpx;
        text-indent: 10rpx;
    }
}


//有抽奖机会
.chance-box{
    .fixed(@b:7%,@r:0,@l:0);
    margin: 0 auto;
    .wh(200rpx,250rpx);
}
.has-chance,.no-chance{
    .wh(140rpx*1.3,184rpx*1.3);
    .absolute(@t:0,@l:0,@r:0);
    margin: 0 auto;
}
.chance{
    .wh(100rpx,50rpx);
    .absolute(@t:157rpx,@l:48rpx);
    text-align: center;
    font-size: 40rpx;
}
.chance + text{
    .absolute(@t:87%,@r:33rpx);
    font-size: 22rpx;
    color: rgba(255,255,255,.8);
}
.chance + text text{
    color: #c58a35;
    margin: 0 10rpx;
}
//无抽奖机会
.no-chance + text{
    text-align: center;
    .absolute(@t:74%,@r:115rpx);
    font-size: 20rpx;
    color:rgba(255,255,255,.8);
}
.no-chance + text + text{
    .absolute(@t:74%,@r:45rpx);
    font-size: 20rpx;
    color: #c58a35;
}

//获取金币弹窗
.get-goldcoin{
    image:only-child{
        .absolute(@t:10%,@l:0,@r:0);
        margin: 0 auto;
        .wh(739rpx,851rpx);
        z-index: 2;
        image:nth-child(1){
            .wh(475rpx,59rpx);
            .absolute(@t:20%,@l:0,@r:0);
            margin: 0 auto;
        }
        image:nth-child(2){
            .wh(253rpx,23rpx);
            .absolute(@t:33%,@l:130rpx);
        }
        image:nth-child(3){
            .wh(478rpx,81rpx);
            .absolute(@t:41%,@l:0,@r:0);
            margin: 0 auto;
        }
        image:nth-child(4){
            .wh(478rpx,81rpx);
            .absolute(@t:53%,@l:0,@r:0);
            margin: 0 auto;
        }
        image:nth-child(3) image,image:nth-child(4) image{
            .wh(165rpx,81rpx);
            .absolute(@t:0,@b:0,@r:0);
            margin: auto 0;
        }
        image:nth-child(5){
            .wh(443rpx,72rpx);
            .absolute(@b:16%,@l:0,@r:0);
            margin: 0 auto;
        }
    }
}

//获取大通宝弹窗
.get-bao{
    image:only-child{
        .wh(750rpx,586rpx);
        .absolute(@t:15%);
        z-index: 2;
        image:nth-child(1){
            .wh(415rpx,26rpx);
            .absolute(@t:45%,@l:0,@r:0);
            margin: 0 auto;
        }
        image:nth-child(2){
            .wh(443rpx,72rpx);
            .absolute(@b:15%,@r:0,@l:0);
            margin: 0 auto;
        }
    }
}


//金币兑换大通宝弹窗
.coin2bao{
    image:only-child{
        .wh(750rpx,681rpx);
        .absolute(@b:0);
        z-index: 2;
        .coin2bao-close{
            .wh(52rpx,52rpx);
            .absolute(@t:6%,@r:7%);
        }
        text:nth-child(2){
            color: rgba(255,255,255,.8);
            font-size: 26rpx;
            .absolute(@t:185rpx,@l:150rpx);
        }
        text:nth-child(3){
            color: #ffa734;
            font-size: 26rpx;
            .absolute(@t:186rpx,@l:300rpx);
        }
        .coin2bao-item{
            display: flex;
            justify-content: space-around;
            .absolute(@t:308rpx,@r:0,@l:0);
            width: 90%;
            margin: 0 auto;
            image{
                .wh(144rpx,139rpx);
            }
        }
        .coin2bao-item + image{
            .wh(631rpx,74rpx);
            .absolute(@t:530rpx,@r:0,@l:0);
            margin: 0 auto;
        }
    }
}
//游戏规则介绍弹窗
.game-intro{
    .intro-wrap1{
        .wh(606rpx,989rpx);
        .absolute(@t:5%,@l:0,@r:0);
        margin: 0 auto;
        z-index: 2;
        image:nth-child(1){
            .wh(430rpx,38rpx);
            .absolute(@t:18%,@l:0,@r:0);
            margin: 0 auto;
        }
        image:nth-child(2){
            .wh(439rpx,555rpx);
            .absolute(@t:30%,@l:0,@r:0);
            margin: 0 auto;
        }
    }
    .game-intro-btn{
        .wh(443rpx,72rpx);
        .fixed(@t:1100rpx,@l:0,@r:0);
        margin: 0 auto;
    }
}
//等级介绍弹窗
.level-intro{
    image:only-child{
        .wh(100%,100%);
        .absolute(@t:0);
        z-index: 2;
        scroll-view{
            .wh(65%,41%);
            .absolute(@t:29%,@l:0,@r:0);
            margin: 0 auto;
            .item{
                .wh(100%,12.5%);
                position: relative;
                image{
                    .absolute(@t:7rpx,@l:20rpx);
                    .wh(30rpx,41rpx);
                }
                text:nth-child(2),text:nth-child(3),text:nth-child(4){
                    font-size: 20rpx;
                    height: 52rpx;
                    line-height: 52rpx;
                }
                text:nth-child(2){
                    .absolute(@t:0,@l:60rpx);
                    color: #fff;
                }
                text:nth-child(3){
                    .absolute(@t:0,@l:230rpx);
                    color: #ee8800;
                    width: 60rpx;
                    text-align: center;
                }
                text:nth-child(4){
                    .absolute(@t:0,@r:30rpx);
                    width: 60rpx;
                    text-align: center;
                    color: #59bc1d;
                }
            }
        }
        scroll-view + image{
            .wh(443rpx,72rpx);
            .absolute(@b:18%,@l:0,@r:0);
            margin: 0 auto;
            z-index: 2;
        }
        .level-intro-title{
            .wh(502rpx,55rpx);
            .absolute(@t:22.5%,@l:0,@r:0);
            margin: 0 auto;
            z-index: 2;
        }
    }
}


//字体渐变
.num{
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ed8a05), to(#1b77b7));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
